<template>
<div class="travelsEdit-wrapper">
  <!-- 顶部工具栏 -->
  <div class="toolbar" :style="{paddingTop: paddingTop + 'px', background: 'url('+headerBg+')'}">
    <div class="wrapper">
      <i @click="close" class="fa fa-times" aria-hidden="true" style="font-size: 21px; padding: 0 6px; margin-left: 15px; line-height: 28px;"></i>
      <div class="right">
        <div class="item" @click="toSort"><i class="fa fa-sort" aria-hidden="true"></i> 排序</div>
        <div class="item" @click="shwoPreview = true"><i class="fa fa-eye" aria-hidden="true"></i> 预览</div>
        <div class="item" @click="publish(0)"><i class="fa fa-refresh" aria-hidden="true"></i> 保存</div>
        <div class="item" @click="publish(1)"><i class="fa fa-check" aria-hidden="true"></i> 发表</div>
      </div>
    </div>
  </div>

  <div :style="{ height: mainHeight + 'px'}" style="overflow-y: scroll; -webkit-overflow-scrolling: touch;">
    <!-- 头图 -->
    <div class="firstImg" v-if="firstImg" :style="{backgroundImage: 'url('+firstImg+')'}">
      <p class="update" @click="showEditFirstImg = true">更换头图</p>
    </div>
    <!-- 标题 -->
    <div class="travels-title" @click="toEditTitle">{{title}}</div>
    <!-- 内容区域 -->
    <div class="travels-content" v-if="travelsConf.length > 1">
      <div>
        <template v-for="(item, index) in travelsConf">
          <div :key="index"  v-if="item.type == 0" class="block divider">
            <template v-if="item.open">
              <div class="select-item" v-for="t in blockType" :key="t.value" @click="toEditBlock(t.value, index, '')">
                <img :src="t.icon" style="width: 18px"/><span>{{t.label}}</span>
              </div>
            </template>
            <img v-else :src="defaultPlus" @click="openBlockType(index)" style="width: 24px"/>
          </div>
          <v-touch :key="index" v-if="item.type == 1" tag="p"  @tap="toEditBlock(item.type, index, item.content)" @press="press(index, 1)" :press-options="{time: 800}" class="block text">{{item.content}}</v-touch>
          <v-touch :key="index" v-else-if="item.type == 2" tag="img"  @tap="toEditBlock(item.type, index, item.content)" @press="press(index, 2)" :press-options="{time: 800}" v-lazy="item.content"/>
          <v-touch :key="index" v-else-if="item.type == 3" tag="p"  @tap="toEditBlock(item.type, index, item.content)" @press="press(index, 3)" :press-options="{time: 800}" class="block section" :id="'section' + index">{{item.content}}</v-touch>
        </template>
      </div>
    </div>
    <!-- 初始化提示 -->
    <div v-if="travelsConf.length <= 1" style="padding: 15px;">
      <div style="display: flex; justify-content: space-around; align-items: center; margin-top: 20px; margin-bottom: 35px;">
        <div style="width: 49.5%; text-align: center;" @click="toEditBlock(1)">
          <img :src="defaultPlus" height="45px"/>
          <p style="font-size: 16px; line-height: 1;">添加文字</p>
        </div>
        <div style="height: 35px; width: 1px; background: #f8f8f8;"></div>
        <div style="width: 49.5%; text-align: center;" @click="toEditBlock(2)">
          <img :src="defaultPlus" height="45px"/>
          <p style="font-size: 16px; line-height: 1;">添加图片</p>
        </div>
      </div>
      <p style="font-weight: bold;">提示</p>
      <p class="tips">你可以从任意添加一段文字或是图片开始一篇游记。后期可以用“排序”功能来完成游记和文字的编辑</p>
    </div>
    <!-- 编辑标题 -->
    <div v-transfer-dom>
      <popup v-model="showEditTitle" :hide-on-blur="false" position="right" width="100%" height="100%" :show-mask="false" class="popup-wrapper">
        <v-header :handleClick="true" @back="quitEdit(0)">
          <p slot="right" @click="submitBlockEdit(0)">下一步</p>
        </v-header>
        <x-textarea ref="titleTextarea" v-model="editingTitle" :max="48" :rows="1" :autosize="true" :placeholder="'请输入'+ ($route.params.type === '0' ? '游记' : '攻略') + '标题'" class="travels-title"></x-textarea>
        <div v-if="$route.params.type == 1" class="selectAddress" @click="showSelectAddress = true">
          <p>目的地</p>
          <p class="selected" v-if="publishAddress !== null">{{publishAddress.name}}</p>
          <p class="unselected" v-else>选择出行目的地</p>
        </div>
        <p style="margin-top: 20px; font-weight: bold; padding: 0 15px;">提示</p>
        <ul class="tips">
          <li>1.一个好的{{this.$route.params.type === '0' ? '游记' : '攻略'}}标题会给你带来更多的阅读哦。</li>
          <li>2.标题也可以在写游记的过程中进行编辑。</li>
          <li>3.设置好标题后，可以通过点击“下一步”来添加照片或者文字。</li>
          <li>4.第一段文字不能超过500个字</li>
        </ul>
      </popup>
    </div>
    <!-- 编辑段落标题 -->
    <div v-transfer-dom>
      <popup v-if="showEditSection" v-model="showEditSection" position="right" width="100%" height="100%" :show-mask="false" class="popup-wrapper">
        <v-header :title="editingTarget.default != '' ? '修改段落标题' : '添加段落标题'" :handleClick="true" @back="quitEdit(1)">
          <p slot="right" @click="submitBlockEdit(3)">完成</p>
        </v-header>
        <x-textarea ref="sectionTextarea" v-model="editingTarget.value" :max="20" :rows="2" :autosize="true"  placeholder="请输入段落标题" class="travels-title" style="font-size: 18px; font-weight: bold;"></x-textarea>
        <p style="margin-top: 20px; font-weight: bold; padding: 0 15px;">提示</p>
        <ul class="tips">
          <li>用段落标题给文章分段，使表达更清晰。</li>
          <li>段落标题将以“目录”的形式存在。</li>
        </ul>
      </popup>
    </div>
    <!-- 编辑文字 -->
    <div v-transfer-dom>
      <popup v-if="showEditText" v-model="showEditText" position="right" width="100%" height="100%" :show-mask="false" class="popup-wrapper">
        <v-header :title="editingTarget.default != '' ? '编辑文字' : '添加文字'" :handleClick="true" @back="quitEdit(2)">
          <p slot="right" @click="submitBlockEdit(1)">完成</p>
        </v-header>
        <x-textarea ref="textTextarea" :rows="6" :autosize="true" :style="{height: mainHeight - 24 + 'px'}" v-model="editingTarget.value" :max="9999" :show-counter="false" :placeholder="'请输入'+ ($route.params.type === '0' ? '游记' : '攻略')+'文字'" class="travels-title" style="font-size: 16px; font-weight: normal; line-height: 28px;overflow-y: scroll; margin: 12px 0; padding: 0 15px; -webkit-overflow-scrolling: touch;"></x-textarea>
      </popup>
    </div>
    <!-- 拖拽排序 -->
    <div v-transfer-dom>
      <popup v-model="showSort" position="bottom" width="100%" height="100%" :show-mask="false" class="popup-wrapper">
        <v-header title="排序" :handleClick="true" @back="quitSort" customBackground="#fff" :showBackground="false" fontColor="#000">
          <p slot="right" @click="submitSort" style="font-weight: bold;">确定</p>
        </v-header>
        <div class="sort-wrapper" :style="{hieght: mainHeight + 'px'}" style="overflow-y: scroll; -webkit-overflow-scrolling: touch;">
          <div v-if="showSortTip" style="padding: 15px;">
            <p class="sort-tip" @click="showSortTip = false">长按任意图片或者文字框都可以进行顺序调整  <i class="fa fa-times-circle" aria-hidden="true"></i></p>
          </div>
          <draggable v-model="draggleList" :options="{group: 'travelsConf'}" class="draggable-wrapper">
            <!-- <transition-group> -->
              <template v-for="(item, index) in draggleList">
                <div :key="index" v-if="item.type == 1" class="item text">
                  <p>{{item.content}}</p>
                </div>
                <div :key="index" v-else-if="item.type == 2" class="item img">
                  <div v-lazy:backgroundImage="item.content"></div>
                </div>
                <div :key="index" v-else-if="item.type == 3" class="item section">
                  <p>{{item.content}}</p>
                </div>
              </template>
            <!-- </transition-group> -->
          </draggable>
        </div>
      </popup>
    </div>
    <!-- 编辑头图 -->
    <div v-transfer-dom>
      <popup v-model="showEditFirstImg" position="bottom" width="100%" height="100%" :show-mask="false" class="popup-wrapper">
        <v-header title="编辑头图" :handleClick="true" @back="showEditFirstImg = false" customBackground="#fff" :showBackground="false" fontColor="#000">
        </v-header>
        <div class="edit-first-img" :style="{hieght: mainHeight + 'px'}" style="overflow-y: scroll; -webkit-overflow-scrolling: touch;">
            <template v-for="(item, index) in travelsConf">
              <div :key="index" v-if="item.type == 2" @click="submitEditFirstImg(item.content)" class="img" v-lazy:backgroundImage="item.content">
              </div>
            </template>
        </div>
      </popup>
    </div>
    <!-- 目录-->
    <div v-transfer-dom>
      <popup v-model="showCatalog" position="left" width="80%" height="100%" class="popup-wrapper">
        <p :style="{marginTop: paddingTop + 'px'}" style="padding: 7px 15px; border-bottom: 1px solid #f0f0f0">游记目录</p>
        <ul class="catalog" v-if="showCatalog">
          <li v-for="item in catalogList" :key="item.index" @click="clickSection(item)"><span style="color: #666; font-weight: bold; margin-right: 6px;">{{item.index}}</span>{{item.content}}</li>
        </ul>
      </popup>
    </div>
    <!-- 预览  -->
    <div v-transfer-dom>
      <popup v-model="shwoPreview" position="left" width="100%" height="100%" class="popup-wrapper" style="overflow-y: scroll; ">
      <v-header title="预览" :handleClick="true" @back="shwoPreview = false"></v-header>
      <div class="travels-content" v-if="shwoPreview && travelsConf.length > 1">
        <div></div>
        <div>
          <template v-for="(item, index) in travelsConf">
            <p :key="index" v-if="item.type == 1" @click="toEditBlock(item.type, index, item.content)" class="block text">{{item.content}}</p>
            <img :key="index" v-else-if="item.type == 2" @click="toEditBlock(item.type, index, item.content)" v-lazy="item.content"/>
            <p :key="index" v-else-if="item.type == 3" @click="toEditBlock(item.type, index, item.content)" class="block section" :id="'section' + index">{{item.content}}</p>
          </template>
        </div>
      </div>
      </popup>
    </div>
    <!-- 选择目的地 -->
    <address-selector v-model="showSelectAddress" @selectArea="selectArea"></address-selector>

    <div class="catalogBtn" v-if="catalogList.length > 0" @click.stop="showCatalog = true">
      <i class="fa fa-list-ul" aria-hidden="true"></i>
      目录
    </div>
    <input ref="selectImg" type="file" accept="image/*" @change="changeImg" style="display: none;"/>
  </div>
</div>
</template>

<script>
import { isIphoneX } from '@/assets/js/brower'
import uploadFile from '@/api/uploadFile'
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
import headerBg from '@/assets/img/header_bg.png'
import defaultImg from '@/assets/img/defaultImg.png'
import defaultText from '@/assets/img/defaultText.png'
import defaultTitle from '@/assets/img/defaultTitle.png'
import defaultPlus from '@/assets/img/defaultPlus.png'
import { handleBackMixin } from '@/assets/js/mixin'
import { mapGetters } from 'vuex'

import Draggable from 'vuedraggable'
import VHeader from '@/components/v-header/v-header'
import AddressSelector from '@/components/address-selector/address-selector'
import { Popup, TransferDom, XTextarea } from 'vux'

const EMPTY_ITEM = {
  index: -1,
  value: '',
  default: ''
}

export default {
  mixins: [handleBackMixin],
  data () {
    return {
      headerBg,
      defaultPlus,
      showSelectAddress: false,
      publishAddress: null,
      showEditTitle: false,
      editingTitle: '',     // 编辑中的标题
      showEditSection: false,
      showEditText: false,
      shwoPreview: false,
      editingTarget: EMPTY_ITEM,      // 编辑中的段落标题、文字、图片
      showSort: false,
      showSortTip: false,
      showEditFirstImg: false,    // 编辑头图
      draggleList: [],  // 拖动列表
      showCatalog: false,
      catalogList: [],  // 目录
      allPopupModels: ['showSelectAddress', 'showEditTitle', 'showEditSection', 'showEditText', 'shwoPreview', 'showSort', 'showEditFirstImg', 'showCatalog'],
      title: '请输入游记标题',
      firstImg: null,
      mainHeight: 500,
      travelsConf: [
        {type: 0, open: false}
      ],
      blockType: [
        // 0 表示分割线
        {
          value: 1,
          label: '文字',
          icon: defaultText
        },
        {
          value: 2,
          label: '图片',
          icon: defaultImg
        },
        {
          value: 3,
          label: '段落',
          icon: defaultTitle
        }
      ]
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, Popup, XTextarea, Draggable, AddressSelector
  },
  computed: {
    ...mapGetters([
      'areaList'
    ])
  },
  created() {
    this.paddingTop = 24
    this.paddingBottom = 0
    this.statusBarHeight = 24
    if (isIphoneX()) {
      this.paddingTop = 34
      this.paddingBottom = 34
      this.statusBarHeight = 44
    }
    this.mainHeight = window.innerHeight - (this.paddingTop + 40)

    if (this.$route.params.type === '0') {
      this.title = '请输入游记标题'
    } else {
      this.title = '请输入攻略标题'
    }
    if (this.$route.query.id == null) {
      this.showEditTitle = true
      setTimeout(() => {
        this.$refs.titleTextarea.$el.getElementsByTagName('textarea')[0].focus()
      }, 80)
    } else {
      this._getTravels(this.$route.query.id)
    }

    // 软键盘收缩监听
    window._Native_heightChange = (height, visibleHeight) => {
      // 软键盘的收缩导致的高度变化。Android与IOS同样处理
      const scale = height / window.innerHeight // 1px在移动端所占像素点
      if ((height - visibleHeight) / scale <= this.statusBarHeight) {
        // 软键盘关闭时
        this.mainHeight = window.innerHeight - (this.paddingTop + 40)
      } else {
        // 软键盘打开时
        this.mainHeight = window.innerHeight - (this.paddingTop + 40) - (height - visibleHeight) / scale
      }
    }
  },
  methods: {
    _getTravels (id) {
      axios.get(this, '/v1/playStrategy', {
        id: id
      }, data => {
        if (data == null || data.length === 0) {
          return
        }
        if (data[0].title) {
          this.title = data[0].title
        }
        if (data[0].firstImg) {
          this.firstImg = data[0].firstImg
        }
        if (data[0].articleContent) {
          // 格式化处理
          const articleContent = JSON.parse(data[0].articleContent)
          let tmp = [{type: 0, open: false}]
          articleContent.forEach(item => {
            tmp.push(item)
            tmp.push({type: 0, open: false})
          })
          this.travelsConf = tmp
        }
      })
    },
    handleNativeBack () {
      if (this.showSelectAddress) {
        this.showSelectAddress = false
      } else if (this.showEditTitle) {
        this.quitEdit(0)
      } else if (this.showEditSection) {
        this.quitEdit(1)
      } else if (this.showEditText) {
        this.quitEdit(2)
      } else if (this.showSort) {
        this.showSort = false
      } else if (this.shwoPreview) {
        this.shwoPreview = false
      } else if (this.showEditFirstImg) {
        this.showEditFirstImg = false
      } else if (this.showCatalog) {
        this.showCatalog = false
      } else {
        this.close()
      }
      return true
    },
    quitEdit (type) {
      const _self = this
      this.$vux.confirm.show({
        title: '要放弃本次编辑么',
        confirmText: '继续编辑',
        cancelText: '放弃',
        onCancel () {
          if (type === 0) {
            // 游记标题
            if (_self.$route.query.id == null) {
              _self.$router.go(-1)
            } else {
              _self.showEditTitle = false
              _self.editingTitle = ''
            }
          } else if (type === 1) {
            // 段落标题
            _self.showEditSection = false
            _self.editingTarget = EMPTY_ITEM
          } else if (type === 2) {
            // 游记文字
            _self.showEditText = false
            _self.editingTarget = EMPTY_ITEM
          }
        },
        onConfirm () {
        }
      })
    },
    showAddressPopup () {
      document.getElementsByClassName('vux-popup-show')[0].style.zIndex = 502
    },
    hideAddressPopup () {
      document.getElementsByClassName('vux-popup-show')[0].style.zIndex = 500
    },
    selectArea (area) {
      this.publishAddress = area
      this.showSelectAddress = false
    },
    press (index, type) {
      // type  1 文字   2 图片  3 段落
      let str = ''
      switch (type) {
        case 1:
          str = '这段文字'
          break
        case 2:
          str = '这张图片'
          break
        case 3:
          str = '这段标题'
          break
        default:
          str = '这个版块'
      }
      const _self = this
      this.$vux.confirm.show({
        title: `确定删除${str}吗？`,
        onCancel () {
        },
        onConfirm () {
          _self.travelsConf.splice(index - 1, 2)
        }
      })
    },
    submitBlockEdit (type) {
      // 这里的type是上面调用方法是传进来的
      if (type === 0) {
        if (this.editingTitle === '') {
          this.$vux.toast.text('请输入游记/攻略标题')
          return
        }
        if (this.$route.params.type === '1' && this.publishAddress == null) {
          this.$vux.toast.text('请选择出行目的地')
          return
        }
        axios.post(this, '/v1/playStrategy', {
          title: this.editingTitle,
          articleType: this.$route.params.type,
          publishTime: this.moment().format('YYYY-MM-DD'),
          publishUserId: localUser.get('id'),
          publishAddressId: this.publishAddress == null ? '' : this.publishAddress.id
        }, (data) => {
          this.$router.replace({
            path: `/address/travelsEdit/${this.$route.params.type}`,
            query: {
              id: data
            }
          })
          this.title = this.editingTitle
          this.editingTitle = ''
          this.showEditTitle = false
        })
      } else {
        // 段落，或者文字
        if (this.editingTarget.value == null || this.editingTarget.value === '') {
          if (this.editingTarget.default == null || this.editingTarget.default === '') {
            this.$vux.toast.text(`请输入${this.$route.params.type === '0' ? '游记' : '攻略'}${type === 1 ? '文字' : '段落的标题'}`)
            return
          } else {
            // 删除
            this.travelsConf.splice(this.editingTarget.index, 2)
          }
        } else {
          if (this.editingTarget.default !== '') {
            // 修改
            this.travelsConf.splice(this.editingTarget.index, 1, {
              type: type,
              content: this.editingTarget.value
            })
          } else if (this.editingTarget.index <= -1) {
            // 新增
            this.travelsConf = this.travelsConf.concat([{
              type: type,
              content: this.editingTarget.value
            },
            {
              type: 0,
              open: false
            }])
          } else {
            // 插入
            this.travelsConf.splice(this.editingTarget.index, 1, {type: 0, open: false}, {type: type, content: this.editingTarget.value}, {type: 0, open: false})
          }
        }
        this.editingTarget = EMPTY_ITEM
        this.showEditText = false
        this.showEditSection = false
      }
    },
    quitSort () {
      const _self = this
      this.$vux.confirm.show({
        title: '确认放弃排序？',
        confirmText: '确定',
        cancelText: '取消',
        onConfirm () {
          _self.showSort = false
        }
      })
    },
    submitSort () {
      if (this.draggleList.length > 0) {
        const tmp = [{type: 0, open: false}]
        this.draggleList.forEach(item => {
          tmp.push(item)
          tmp.push({type: 0, open: false})
        })
        this.travelsConf = tmp
      }
      this.showSort = false
    },
    submitEditFirstImg (src) {
      this.firstImg = src
      this.showEditFirstImg = false
    },
    openBlockType (index) {
      this.travelsConf.forEach((item, i) => {
        if (item.type === 0) {
          if (i === index) {
            item.open = true
          } else {
            item.open = false
          }
        }
      })
    },
    clickSection (section) {
      this.showCatalog = false
      document.getElementById(section.id).scrollIntoView({
        behavior: 'smooth',
        inline: 'center'
      })
    },
    close () {
      const _self = this
      this.$vux.confirm.show({
        title: `已将你编辑的${this.$route.params.type === '0' ? '游记' : '攻略'}内容自动保存，确定要离开编辑页面吗？`,
        confirmText: '继续编辑',
        cancelText: '放弃',
        onCancel () {
          const tmp = []
          let intro = ''
          _self.travelsConf.forEach(item => {
            if (item.type !== 0) {
              tmp.push(item)
            }
            if (intro === '' && item.type === 1) {
              intro = item.content
            }
          })
          axios.put(_self, '/v1/playStrategy/' + _self.$route.query.id, {
            title: _self.title,
            publish: 0,
            firstImg: _self.firstImg,
            intro: _self.intro,
            articleContent: JSON.stringify(tmp)
          }, () => {
            _self.$router.go(-1)
          })
          return false
        },
        onConfirm () {
          return true
        }
      })
    },
    toSort () {
      this.showSort = true
      this.showSortTip = true
      const tmp = []
      this.travelsConf.forEach(item => {
        if (item.type !== 0) {
          tmp.push(item)
        }
      })
      this.draggleList = tmp
    },
    toEditTitle () {
      this.showEditTitle = true
      this.editingTitle = this.title
      // this.$refs.titleTextarea.focus()
      setTimeout(() => {
        this.$refs.titleTextarea.$el.getElementsByTagName('textarea')[0].focus()
      }, 80)
    },
    toEditBlock (type, index, value) {
      this.editingTarget = {
        index: index == null ? -1 : index,
        value: value || '',
        default: value || ''
      }
      switch (type) {
        case 1:
          // 文字
          this.showEditText = true
          break
        case 2:
          // 图片
          this.$refs.selectImg.dispatchEvent(new MouseEvent('click'))
          break
        case 3:
          // 段落
          this.showEditSection = true
          break
      }
      setTimeout(() => {
        if (type === 1) {
          this.$refs.textTextarea.$el.getElementsByTagName('textarea')[0].focus()
        } else if (type === 3) {
          this.$refs.sectionTextarea.$el.getElementsByTagName('textarea')[0].focus()
        }
      }, 80)
    },
    changeImg (e) {
      if (e.target.files.length > 0 && e.target.files[0].size > 0) {
        uploadFile(this, e.target.files, (data) => {
          this.editingTarget.value = data[0].downloadPath
          const findIndex = this.travelsConf.findIndex(o => o.type === 2)
          if (findIndex === -1) {
            this.firstImg = data[0].downloadPath
          }
          this.submitBlockEdit(2)
        })
        e.target.value = ''
      }
    },
    publish (status) {
      if (this.title === '') {
        this.$vux.toast.text('请输入标题', 'middle')
        return
      }
      if (this.firstImg === '') {
        this.$vux.toast.text('请至少选择一张图片', 'middle')
        return
      }
      const tmp = []
      let intro = ''
      this.travelsConf.forEach(item => {
        if (item.type !== 0) {
          tmp.push(item)
        }
        if (intro === '' && item.type === 1) {
          intro = item.content
        }
      })
      if (intro === '') {
        this.$vux.toast.text('请至少写一段话', 'middle')
        return
      }
      if (intro.length > 500) {
        this.$vux.toast.text('第一段文字不能超过500个字哦', 'middle')
        return
      }
      axios.put(this, '/v1/playStrategy/' + this.$route.query.id, {
        title: this.title,
        publishTime: this.moment().format('YYYY-MM-DD'),
        publish: status,
        firstImg: this.firstImg,
        intro: intro,
        articleContent: JSON.stringify(tmp)
      }, () => {
        if (status === 1) {
          if (this.$route.params.type === '0') {
            this.$router.push('/address/travelsPerfect/' + this.$route.query.id)
          } else {
            this.$vux.toast.text('发布攻略成功~', 'middle')
            this.$router.go(-1)
          }
        } else {
          this.$vux.toast.text(`${status === 0 ? '保存' : '发布'}成功~`, 'middle')
          this.$router.go(-1)
        }
      })
    }
  },
  watch: {
    travelsConf(v) {
      const tmp = []
      v.forEach((item, index) => {
        if (item.type === 3) {
          tmp.push(Object.assign({}, item, {id: 'section' + index}))
        }
      })
      tmp.forEach((item, index) => {
        const i = index + 1
        item.index = i > 9 ? i : ('0' + i)
      })
      this.catalogList = tmp
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.travelsEdit-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 101;
  .toolbar {
    color: #fff;
    .wrapper {
      height: 28px;
      line-height: 28px;
      padding: 6px
      display: flex;
      justify-content: space-between;
      .right {
        padding-right: 12px;
        display: flex;
        justify-content: flex-end;
      }
      .item {
        padding: 0 6px;
        font-weight: bold;
        font-size: $font-size-title;
        border-right: 1px solid $color-border;
        &:last-child {
          padding-right: 0;
          border-right: none;
        }
      }
    }
  }
  .firstImg {
    position: relative;
    height: 180px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    .update {
      height: 35px;
      line-height: 35px;
      font-size: $font-size-title;
      padding: 0 18px;
      position: absolute;
      right: 0;
      bottom: 35px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
  }
  .travels-title {
    font-size: 24px;
    font-weight: bold;
    padding: 12px 15px;
    margin-top: 15px;
    font-family: 'SimHei';
  }
  .travels-content {
    .section {
      position: relative;
      font-size: $font-size-title;
      font-weight: bold;
    }
    img {
      width: 100%;
      height: auto;
    }
    .block {
      border-top: 1px solid #f8f8f8;
      padding: 15px;
    }
    .text {
      position: relative;
      font-size: $font-size-desc;
      white-space: pre-wrap;
    }
    .edit {
      position: absolute;
      right: 15px;
      color: blue;
    }
    .divider {
      height: 45px;
      padding: 0;
      line-height: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .select-item {
        display: flex;
        align-items: center;
        padding: 0 7px;
      }
      img {
        width: 18px;
      }
    }
  }
  .catalogBtn {
    height: 35px;
    line-height: 35px;
    font-size: $font-size-title;
    padding: 0 18px;
    position: absolute;
    left: -15px;
    bottom: 125px;
    background: #fff;
    border: 1px solid $color-border;
    border-radius: 20px;
    box-shadow: 0 0 3px $color-border;
  }
  .tips {
    padding: 7px 15px;
    line-height: 1.4;
    color: #333;
    font-weight: 100;
  }
}

.popup-wrapper {
  background: #fff;
  ul {
    list-style: none;
  }
  .tips {
    padding: 7px 15px;
    line-height: 1.4;
    color: #333;
    font-weight: 100;
  }
  .travels-title {
    font-size: 24px;
    font-weight: bold;
    padding: 12px 15px;
    margin-top: 15px;
    font-family: 'SimHei';
    &:before {
      border: none;
    }
    textarea {
      font-family: 'SimHei';
      font-weight: bold;
    }
    .weui-textarea-counter {
      font-size: $font-size-small;
    }
  }
  .travels-content {
    .section {
      position: relative;
      font-size: $font-size-title;
      font-weight: bold;
    }
    img {
      width: 100%;
      height: auto;
    }
    .block {
      border-top: 1px solid #f8f8f8;
      padding: 15px;
    }
    .text {
      position: relative;
      font-size: $font-size-desc;
      white-space: pre-wrap;
    }
    .edit {
      position: absolute;
      right: 15px;
      color: blue;
    }
    .divider {
      height: 45px;
      padding: 0;
      line-height: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .select-item {
        display: flex;
        align-items: center;
        padding: 0 7px;
      }
      img {
        width: 30px;
      }
    }
  }
  .selectAddress {
    position: relative;
    padding: 12px 15px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .selected {
      color: #999;
    }
    .unselected {
      color: $color-theme
    }
    &:before {
      content: '*'
      display: block;
      width: 6px;
      height: 6px;
      top: 12px;
      left: 8px;
      color: red;
      position: absolute;
    }
  }
  .sort-wrapper {
    .sort-tip {
      background: $color-them;
      line-height: 1;
      padding: 9px 0;
      font-size: $font-size-desc;
      color: #444;
      text-align: center;
      background: #fdf6ec;
      border: 1px solid #e6a23c;
      border-radius: 3px;
      font-weight: 100;
      i {
        color: #e6a23c;
        margin-left: 3px;
      }
    }
    .draggable-wrapper {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: calc(25vw - 4px);
        height: calc(25vw - 4px);
        margin: 0 1px;
        overflow: hidden;
        font-size: $font-size-small;
        border: 1px solid $color-border;
        position: relative;
        text-align: center;
        background: #fff;
      }
      .text {
        p {
          margin: 12px;
        }
      }
      .section {
        p {
          margin: 12px;
        }
        &:before {
          content: 'TITLE';
          background: $color-background;
          position: absolute;
          top: 0;
          left: 0px;
          color: #fff;
          font-size: $font-size-small;
          line-height: 1;
          padding: 3px 6px;
        }
      }
      .img {
        border: 1px solid rgba(0, 0, 0, 0);
        div {
          width: 100%;
          height: 100%;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: 50% 50%;
        }
      }
    }
  }
  .catalog {
    padding: 9px 15px;
    li {
      padding: 6px 0;
      font-size: $font-size-desc;
      border-bottom: 1px solid $color-border;
      &:last-child {
        border-bottom: none;
      }
    }
  }
  .edit-first-img {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .img {
      width: calc(25vw - 2px);
      height: calc(25vw - 2px);
      margin: 0 1px;
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  }
}
</style>

<style>
  .travels-title .weui-textarea-counter {
    font-size: 12px;
    font-weight: normal;
    padding: 12px 0;
    border-bottom: 1px solid #f8f8f8;
  }

  .travels-title textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #333;
  }
</style>
